<template>
  <div class="box">
    <div class="lis" v-for="(item,index) in tagArr" :key="index" :class="(selectIndex === index)?'light':'normal'"
      @click="change(index)">{{item}}</div>
  </div>
</template>

<script>
  export default {
    name: "NoteItem",
    data() {
      return {
        selectIndex: -1
      }
    },
    props: {
      tagArr: {
        type: Array,
        default: () => {
          return []
        }
      },
      mykey: {
        type: Number,
        default: 0
      },
    },
    methods: {
      change(index) {
        this.selectIndex = index;
        this.$store.commit("remark", {
          key: this.mykey,
          value: this.tagArr[index]
        });
        // console.log(this.tagArr[index]);
        // console.log(this.$store.state.nav.remark)
      }
    },
  }
</script>

<style lang="less" scoped>
  .lis {
    border: 1px solid rgb(49, 144, 232);
    padding: 5px 10px;
    margin: 5px;
    font-size: 14px;
    border-radius: 5px;
  }

  .normal {
    background-color: white;
    color: rgb(49, 144, 232);
  }

  .light {
    background-color: rgb(49, 144, 232);
    color: white;
  }
</style>